<template>
    <view class="content">
        <view class="layout-page">
            <!-- 订单 -->
            <order :visible="active === 'order'" @change="handleTabChange"> </order>

            <!-- 客户 -->
            <customer :visible="active === 'customer'" @change="handleTabChange"> </customer>

            <!-- 工作台 -->
            <workbench
                :visible="active === 'workbench'"
                :style="{ maxHeight: `${ableHeight}px`, overflowY: 'auto' }"
                :roleArr="roleArr"
                @change="handleTabChange">
            </workbench>

            <!-- 报表 -->
            <!-- <erp :visible="active === 'erp'" @change="handleTabChange">
			</erp> -->

            <!-- 商品 -->
            <product :visible="active === 'product'" @change="handleTabChange"> </product>

            <!-- 我的 -->
            <mine :visible="active === 'mine'" @change="handleTabChange"> </mine>
        </view>
        <!-- 在handleChange中手动判断进行active的赋值 -->
        <lb-tabbar
            v-if="tabbars"
            ref="tabbar"
            id="tabbar"
            v-model="active"
            @change="handleChange"
            :activeColor="easyGetColor('main')">
            <lb-tabbar-item
                v-if="item.isShow"
                v-for="item in tabbars"
                :key="item.name"
                :name="item.name"
                :iconCurrent="item.iconCurrent"
                :icon="item.icon"
                :dot="item.dot"
                :info="item.info"
                :raisede="item.raisede"
                icon-prefix="iconfont"
                @click="handleTabbarItemClick">
                {{ item.text }}
            </lb-tabbar-item>
        </lb-tabbar>
        <app-version :isAutoCheck="true" :appId="getAppId()"></app-version>
    </view>
</template>

<script>
import Order from "@/pages/order/index.vue"
import Customer from "@/pages/customer/index.vue"
import Workbench from "@/pages/workbench/index.vue"
import Product from "@/pages/product/index.vue"
import Erp from "@/pages_erp/index.vue"
import Mine from "@/pages/me/index.vue"
import lbTabbar from "@/components/lb-tabbar/lb-tabbar.vue"
import lbTabbarItem from "@/components/lb-tabbar/lb-tabbar-item.vue"
import appVersion from "@/uni-sub-base/module/version/app-version.vue"
import { GetEmployeeTake } from "@/service/api/order.js"
import { GetMenuList } from "@/service/api/user.js"
import { VehicleBingInfo } from "@/pages_tms/service/logistics.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {
        Order,
        Customer,
        Workbench,
        Product,
        Erp,
        Mine,
        lbTabbar,
        lbTabbarItem,
        appVersion,
    },
    data() {
        return {
            active: "",
            tabbars: null,
            ableHeight: 0,
            roleArr: [],
        }
    },
    onLoad(query) {
        // 可通过地址栏传tab参数可指定默认显示哪个tab页面
        this.active = query.tab || "workbench"
    },
    onShow() {},
    onReady() {},
    mounted() {
        //获取一些配置
        const that = this
        this.carInfoFn()
        that.getEmployeeTake()
        this.getMenuList()
        //默认底栏
        let tabbars = JSON.parse(JSON.stringify(this.getAppSet().homeBottomTabBar))
        this.tabbars = tabbars
        setTimeout(() => {
            uni.getSystemInfo({
                //调用uni-app接口获取屏幕高度
                success(res) {
                    //成功回调函数
                    const WH = res.windowHeight
                    const query = uni.createSelectorQuery()
                    query
                        .select("#tabbar")
                        .boundingClientRect((data) => {
                            console.log(data)
                            that.ableHeight = WH - data.height
                        })
                        .exec()
                },
            })
        }, 1000)
    },
    methods: {
        carInfoFn() {
            VehicleBingInfo().then((rsp) => {
                if (rsp.State == 1) {
                    storage.setCache("typeId", rsp.Data.typeId)
                    storage.setCache("deliveryId", rsp.Data.deliveryId)
                } else {
					storage.setCache("typeId", 0)
					storage.setCache("deliveryId",0)
                    // this.easyToast(rsp.Msg)
                }
            })
        },
        getEmployeeTake() {
            GetEmployeeTake().then((res) => {
                if (res.State == 1) {
                    let employeeTake = res.Data //1 代表设置允许代收货
                    storage.setCache("employeeTake", employeeTake)
                }
            })
        },

        handleChange(e) {
            this.active = e.name
        },
        handleTabChange(name) {
            this.active = name
        },
        handleTabbarItemClick(e) {},
        getMenuList() {
            let that = this
            let param = {}
            GetMenuList(param).then((res) => {
                if (res.State == 1 && res.Data && res.Data.length > 0) {
                    this.roleArr = res.Data
                    //获取底栏
                    let tabbars = JSON.parse(JSON.stringify(this.getAppSet().homeBottomTabBar))
                    // 订货单 编码- Purchase_Order
                    // 退货单 编码- Return_Order
                    // 客户管理 编码- Customer_Manage
                    // TMS配送 编码- TMS_Distribution
                    // 采购入库 编码- Purchase_Warehousing
                    let isShowAll = this.roleArr.filter((e) => {
                        return (
                            e.FunctionCode == "Purchase_Order" ||
                            e.FunctionCode == "Return_Order" ||
                            e.FunctionCode == "Customer_Manage"
                        )
                    })
                    let isShowBaobiao = this.roleArr.filter((e) => {
                        return e.FunctionCode == "ERP_Report"
                    })
                    if (isShowAll && isShowAll.length > 0) {
                        tabbars.forEach((item) => {
                            if (item.id == 1 || item.id == 2) {
                                item.isShow = true
                            }
                        })
                    }
                    if (isShowBaobiao && isShowBaobiao.length > 0) {
                        tabbars.forEach((item) => {
                            if (item.id == 6) {
                                item.isShow = true
                            }
                        })
                    }
                    this.tabbars = tabbars
                    this.$forceUpdate()
                }
            })
        },
    },
    watch: {
        active: {
            handler(newVal) {
                if (newVal) {
                    if (!this.tabbars) {
                        return
                    }
                    // pages.json中设置页面的title为空，可在此处动态设置标题及颜色等等
                    const item = this.tabbars.find((item) => item.name === this.active)
                    uni.setNavigationBarTitle({
                        title: item.text,
                    })
                }
            },
            immediate: true,
        },
    },
}
</script>

<style lang="scss" scoped>
.content {
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;

    .layout-page {
        min-height: 0;
        flex: 1;

        /deep/ .page {
            height: 100%;
        }
    }
}
</style>
